// 资源管理
import React, {Component} from "react";
import {Button, Modal, Input, Form, message, Space} from 'antd'
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import ThePagination from "@/components/ThePagination";
import {
    apiGetThirdChannelPage,
    apiGetThirdChannelDel,
    apiGetThirdChannelAddOrEdit
} from "@/request/tripartiteMall/channelManagement";

const {TextArea} = Input
const {confirm} = Modal;
export default class ChannelManagement extends Component {
    constructor(props) {
        super(props)
        this.formRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: '频道ID',
                    dataIndex: 'channelId',
                    key: 'channelId'
                },
                {
                    title: '频道名称',
                    dataIndex: 'channelName',
                    key: 'channelName'
                },
                {
                    title: '备注',
                    dataIndex: 'remark',
                    key: 'remark'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                },
                {
                    title: '关联次数',
                    dataIndex: 'tabCount',
                    key: 'tabCount',
                    render: (text, record) => {
                        return <Space direction={"vertical"}>
                            <span>tab关联:{record.tabCount}</span>
                            <span>资源位:{record.resourceCount}</span>
                        </Space>
                    }
                },
                {
                    title: '商品数量',
                    dataIndex: 'goodsCount',
                    key: 'goodsCount'
                }, {
                    title: '操作',
                    dataIndex: 'operate',
                    key: 'operate',
                    render: (text, record) => {
                        return <div>
                            <Button type="link" onClick={() => this.toGoods(record)}>查看商品列表</Button>
                            <TheButton haspermi={['tripartiteMall:channel:edit']} type="link" onClick={() => this.edit(record)}>修改</TheButton>
                            <TheButton haspermi={['tripartiteMall:channel:del']} type="link" onClick={() => this.del(record)}>删除</TheButton>
                        </div>
                    }
                },
            ],
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            dataSource: [],
            total: 0,
            isModalOpen: false,
            isViewModalOpen: false,
            channelId: null
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = () => {
        apiGetThirdChannelPage({
            ...this.state.pageData
        }).then(res => {
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount
                })
            }
        })
    }
    // 分页
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize,
            },
        }, () => {
            this.getData()
        })
    };
    delToPageStatus = ()=>{
        let { pageData,total } = this.state
        if ((total%pageData.pageSize) === 1){
            this.pageChange(pageData.pageNo-1,pageData.pageSize)
        }
        else {
            this.pageChange(pageData.pageNo,pageData.pageSize)
        }
    }
    handleOk = () => {
        this.setState({
            isModalOpen: false
        })
    }
    handleCancel = () => {
        this.formRef.current.resetFields()
        this.setState({
            isModalOpen: false
        })
    }
    toGoods  = (row) => {
        this.props.history.push(`/tripartiteMall/channelManagement/detail/${row.channelId}`);
    }
    edit = (row) => {
        this.setState({
            isModalOpen: true,
            channelId: row.channelId
        }, () => {
            this.formRef.current.setFieldsValue({...row})

        })
    }
    del = (row) => {
        if (row.tabCount > 0 || row.resourceCount > 0) {
            message.warn("该频道正在被使用，暂不能删除。")
        } else {
            confirm({
                title: '确定删除该频道吗？',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: () => {
                    apiGetThirdChannelDel({channelId: row.channelId}).then(res => {
                        if (res.code === 0) {
                            message.success("删除成功")
                            this.delToPageStatus()
                        }
                    })
                },
                onCancel() {
                    // console.log('Cancel');
                },
            });
        }
    }
    onFinish = (values) => {
        let {channelId} = this.state
        if (channelId) {
            values.channelId = channelId
        }
        apiGetThirdChannelAddOrEdit({...values}).then(res => {
            if (res.code === 0) {
                React.$message({
                    type: 'success',
                    content: channelId ? '修改成功' : '新建成功'
                })
                this.handleCancel()
                this.getData()
            }
        })
    }
    handleViewModalCancel = () => {
        this.setState({
            isViewModalOpen: false
        })
    }
    onViewModalFinish = () => {
        this.setState({
            isViewModalOpen: false
        })
    }

    render() {
        const {columns, dataSource, channelId, pageData, total, isModalOpen, isViewModalOpen} = this.state
        let layout = {
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 16,
            },
        };
        return (
            <div className='p-layout-box'>
                <div>
                    <TheButton haspermi={['tripartiteMall:channel:add']} type="primary" size={'middle'} onClick={() => this.setState({
                        isModalOpen: true
                    })}>新增频道</TheButton>
                </div>
                <div className="p-layout-content-pagination">
                    <TheTable
                        scroll={{x: "max-content", y: "63vh"}}
                        columns={columns}
                        dataSource={dataSource}
                    />
                    <ThePagination
                        pageNo={pageData.pageNo}
                        pageSize={pageData.pageSize}
                        total={total}
                        pageChange={this.pageChange}
                    />
                    <Modal
                        title={channelId ? "编辑频道" : "新建频道"}
                        visible={isModalOpen}
                        maskClosable={false}
                        onCancel={this.handleCancel}
                        footer={null}
                    >
                        <Form {...layout} ref={this.formRef} name="nest-messages" onFinish={this.onFinish}>
                            <Form.Item
                                name="channelName"
                                label="频道名称"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input maxLength={6} placeholder="最多允许输入6个字"/>
                            </Form.Item>
                            <Form.Item name="remark" label="备注">
                                <TextArea maxLength={30} placeholder="请输入0-30备注"/>
                            </Form.Item>
                            <Form.Item
                                wrapperCol={{
                                    xs: {span: 24, offset: 0},
                                    sm: {span: 16, offset: 8},
                                }}
                            >
                                <Button type="default" onClick={this.handleCancel}>
                                    取消
                                </Button>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <Button type="primary" htmlType="submit">
                                    保存
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>

                </div>
            </div>
        )
    }
}
